<template>  
    <div class="demo">  
      <div>  
        <input type="text" v-model="inputValue" placeholder="请输入内容并回车" @keyup.enter="add" />  
        <button @click="add">加入</button>    
        <component :is="tabs[currentTab]" class="tab" :addList="filteredList" @removeItem="removeItem" @toggleCompletion="toggleCompletion"></component>  
        <button  
          v-for="(Component, tabName) in tabs"  
          :key="tabName"  
          :class="['tab-button', { active: currentTab === tabName }]"  
          @click="currentTab = tabName"  
        >  
          {{ tabName === 'all' ? '全部' : tabName.toUpperCase() }}  
        </button>  
      </div>  
    </div>
    <div>
      <a  class="shen" href="https://gitee.com/emperor-yaotian/task" target="_blank">仓库</a>
    </div>  
  </template>  
    
  <script setup>  
  import { ref, computed } from 'vue';  
  import First from './first.vue';  
  import Second from './second.vue';  
  import Third from './third.vue';  
    
  const inputValue = ref('');  
  const addList = ref([]);  
  const currentTab = ref('all');  
    
  const tabs = {  
    all: First,  
    second: Second,  
    third: Third  
  };  
    
  const add = () => {  
    if (inputValue.value) {  
      const newItem = { content: inputValue.value, completed: false };  
      addList.value.push(newItem);  
      inputValue.value = '';  
    }  
  };  
    
  const removeItem = (item) => {  
    const index = addList.value.findIndex(listItem => listItem === item);  
    if (index !== -1) {  
      addList.value.splice(index, 1);  
    }  
  };  
    
  const toggleCompletion = (item) => {  
    const index = addList.value.findIndex(listItem => listItem === item);  
    if (index !== -1) {  
      addList.value[index].completed = !addList.value[index].completed;  
    }  
  };  
    
  const selectAll = () => {  
    addList.value.forEach(item => {  
      item.completed = !addList.value.some(i => !i.completed);   
    });  
  };  
    
    
  const filteredList = computed(() => {  
    if (currentTab.value === 'third') {  
        
      return addList.value.filter(item => !item.completed);  
    }  
     
    return addList.value;  
  });  
  </script>
  <style scoped>
    .demo {  
    font-family: 'Arial', sans-serif;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    background-color: rgb(63, 233, 233);   
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);   
    padding: 25px 35px;  
    margin-top: 2em;   
    margin-bottom: 50px; 
    user-select: none;   
    overflow-x: auto;   
    
  }  
  .tab-button {  
    padding: 8px 15px;   
    border: none;   
    border-radius: 4px 4px 0 0;   
    cursor: pointer;  
    background-color: #83e4f7;   
    transition: background-color 0.3s ease;   
    margin-right: 5px;   
  }  
    
  .tab-button:hover {  
    background-color: #2a07db;   
  }  
    
  .tab-button.active {  
    background-color: rgb(10, 249, 14);   
    border-bottom: 3px solid #333;   
    font-weight: bold;   
  }
  .tab {  
    border: 1px solid #ccc;   
    border-top: none;   
    border-radius: 0 0 4px 4px;   
    padding: 15px;   
    background-color: #fff;   
  }
  input[type="text"] {  
    padding: 8px 10px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
    font-size: 14px;  
    width: 100%;   
    box-sizing: border-box; 
    margin-bottom: 10px;  
  }  
    
  button {  
    padding: 8px 15px;  
    border: none;  
    border-radius: 4px;  
    background-color: #5cb85c;   
    color: #fff;   
    cursor: pointer;  
    transition: background-color 0.3s ease;   
    margin-right: 5px;   
  }  
    
  button:hover {  
    background-color: #4cae4c;   
  }
  .shen{
    font-size: 100px;
  }
  </style>